<template>
	<view style="padding: 24rpx;">
		<view class="main-content" :class="{ 'with-menu': !isMobile }">
			<view style="padding-bottom: 20rpx;">
				<sunMenu :id="menuId"></sunMenu>
				<view class="register-container">
					<h1>{{info.title}}報名</h1>
					<view class="steps-container">
						<view class="step-item" :class="{ active: currentStep >= 1, completed: currentStep > 1 }">
							<view class="step-number">1</view>
							<view class="step-label">填寫個人資料</view>
						</view>
						<view class="step-item" :class="{ active: currentStep >= 2, completed: currentStep > 2 }">
							<view class="step-number">2</view>
							<view class="step-label">物資與加價購</view>
						</view>
						<view class="step-item" :class="{ active: currentStep >= 3, completed: currentStep > 3 }">
							<view class="step-number">3</view>
							<view class="step-label">付款</view>
						</view>
						<view class="step-item" :class="{ active: currentStep >= 4, completed: currentStep > 4 }">
							<view class="step-number">4</view>
							<view class="step-label">完成狀態</view>
						</view>
					</view>
					<view v-if="currentStep === 1">
						<view class="form-group">
							<label><text class="required">*</text>姓名 / Name</label>
							<input type="text" v-model="formData.nickName" class="uni-input" />
						</view>

						<view class="form-group">
							<label><text class="required">*</text>電子信箱 / Email</label>
							<input type="email" v-model="formData.email" class="uni-input" />
						</view>

						<view class="form-row">
							<view class="form-group half">
								<label><text class="required">*</text>國籍/Nationality</label>
								<view class="custom-select" :class="{ 'active': isCountryOpen  }">
									<view class="select-trigger" @click="toggleCountry"
										:class="{ 'placeholder': !formData.country }">
										{{ selectedCountryLabel || '選擇國籍' }}
										<text class="select-arrow">▼</text>
									</view>
									<view class="select-dropdown" v-show="isCountryOpen">
										<view class="select-options">
											<view v-for="country in countries" :key="country.value"
												class="select-option"
												:class="{ 'selected': formData.country === country.value }"
												@click="selectCountry(country)">
												{{ country.label }}
											</view>
										</view>
									</view>
								</view>
							</view>
							<view class="form-group half">
								<label><text class="required">*</text>國家 /Country</label>
								<view class="custom-select" :class="{ 'active': isNationalityOpen }">
									<view class="select-trigger" @click="toggleNationality"
										:class="{ 'placeholder': !formData.nationality }">
										{{ selectedNationalityLabel || '選擇國家' }}
										<text class="select-arrow">▼</text>
									</view>
									<view class="select-dropdown" v-show="isNationalityOpen">
										<view class="select-options">
											<view v-for="nation in nationalities" :key="nation.value"
												class="select-option"
												:class="{ 'selected': formData.nationality === nation.value }"
												@click="selectNationality(nation)">
												{{ nation.label }}
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
						<view class="form-row">
							<view class="form-group half">
								<label v-if="formData.country=='TAIWAN'"><text class="required">*</text>身分證字號(護照號碼) / ID
									Number(Passport No)</label>
								<label v-else><text class="required">*</text>護照號碼 /Passport No.</label>
								<input type="text" v-model="formData.idNumber" />
							</view>
							<view class="form-group half">
								<label><text class="required">*</text>出生年月日 / Birthday</label>
								<view class="birthday-selects">
									<view class="custom-select" :class="{ 'active': isYearOpen }">
										<view class="select-trigger" @click="toggleYear">
											{{ formData.birthYear || '年' }}
											<text class="select-arrow">▼</text>
										</view>
										<view class="select-dropdown" v-show="isYearOpen">
											<view class="select-options">
												<view v-for="year in years" :key="year" class="select-option"
													:class="{ 'selected': formData.birthYear === year }"
													@click="selectYear(year)">
													{{ year }}
												</view>
											</view>
										</view>
									</view>
									<view class="custom-select" :class="{ 'active': isMonthOpen }">
										<view class="select-trigger" @click="toggleMonth">
											{{ formData.birthMonth ? formData.birthMonth.toString().padStart(2, '0') : '月' }}
											<text class="select-arrow">▼</text>
										</view>
										<view class="select-dropdown" v-show="isMonthOpen">
											<view class="select-options">
												<view v-for="month in months" :key="month" class="select-option"
													:class="{ 'selected': formData.birthMonth === month }"
													@click="selectMonth(month)">
													{{ month.toString().padStart(2, '0') }}
												</view>
											</view>
										</view>
									</view>
									<view class="custom-select" :class="{ 'active': isDayOpen }">
										<view class="select-trigger" @click="toggleDay">
											{{ formData.birthDay ? formData.birthDay.toString().padStart(2, '0') : '日' }}
											<text class="select-arrow">▼</text>
										</view>
										<view class="select-dropdown" v-show="isDayOpen">
											<view class="select-options">
												<view v-for="day in days" :key="day" class="select-option"
													:class="{ 'selected': formData.birthDay === day }"
													@click="selectDay(day)">
													{{ day.toString().padStart(2, '0') }}
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
						<view class="form-row">
							<view class="form-group half">
								<label><text class="required">*</text>性別 / Gender</label>
								<view class="radio-group">
									<view class="radio-item" :class="{ active: formData.sex === '0' }"
										@click="selectSex('0')">
										<view class="radio-circle">
											<view class="radio-inner"></view>
										</view>
										<text style="margin-left: 12rpx;">男</text>
									</view>
									<view class="radio-item" :class="{ active: formData.sex === '1' }"
										@click="selectSex('1')">
										<view class="radio-circle">
											<view class="radio-inner"></view>
										</view>
										<text style="margin-left: 12rpx;">女</text>
									</view>
								</view>
							</view>
						</view>
						<view class="form-group" v-if="formData.nationality !== 'TAIWAN'">
							<label><text class="required">*</text>物資寄送方式 / Shipping Method</label>
							<view class="custom-select" :class="{ 'active': isShippingMethodOpen }">
								<view class="select-trigger" @click="toggleShippingMethod" style="height:auto;"
									:class="{ 'placeholder': !formData.shippingMethod }">
									{{ selectedShippingMethodLabel || '選擇寄送方式' }}
									<text class="select-arrow">▼</text>
								</view>
								<view class="select-dropdown" v-show="isShippingMethodOpen">
									<view class="select-options">
										<view v-for="method in shippingMethods" :key="method.value"
											class="select-option"
											:class="{ 'selected': formData.shippingMethod === method.value }"
											@click="selectShippingMethod(method)">
											{{ method.label }}
										</view>
									</view>
								</view>
							</view>
						</view>
						<view class="form-row" v-if="formData.shippingMethod != 'conference'">
							<view class="form-group half">
								<label><text class="required">*</text>縣市 / City</label>
								<view class="custom-select" :class="{ 'active': isCityOpen }">
									<view class="select-trigger" @click="toggleCity">
										{{ selectedCityLabel || '選擇縣市' }}
										<text class="select-arrow">▼</text>
									</view>
									<view class="select-dropdown" v-show="isCityOpen">
										<view class="select-options">
											<view v-for="city in cities" :key="city.value" class="select-option"
												:class="{ 'selected': formData.city === city.value }"
												@click="selectCity(city)">
												{{ city.label }}
											</view>
										</view>
									</view>
								</view>
							</view>
							<view class="form-group half">
								<label><text class="required">*</text>鄉鎮市區 / Area</label>
								<view class="custom-select" :class="{ 'active': isAreaOpen }">
									<view class="select-trigger" @click="toggleArea"
										:class="{ 'disabled': !formData.city }">
										{{ selectedAreaLabel || '選擇地區' }}
										<text class="select-arrow">▼</text>
									</view>
									<view class="select-dropdown" v-show="isAreaOpen && formData.city">
										<view class="select-options">
											<view v-for="area in areas" :key="area.value" class="select-option"
												:class="{ 'selected': formData.area === area.value }"
												@click="selectArea(area)">
												{{ area.label }}
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
						<view class="form-row" v-if="formData.shippingMethod != 'conference'">
							<view class="form-group half">
								<label><text class="required">*</text>路名 / Road</label>
								<view class="custom-select" :class="{ 'active': isRoadOpen }">
									<view class="select-trigger" @click="toggleRoad"
										:class="{ 'disabled': !formData.area }">
										{{ selectedRoadLabel || '選擇路名' }}
										<text class="select-arrow">▼</text>
									</view>
									<view class="select-dropdown" v-show="isRoadOpen && formData.area">
										<view class="select-options">
											<view v-for="road in roads" :key="road.value" class="select-option"
												:class="{ 'selected': formData.road === road.value }"
												@click="selectRoad(road)">
												{{ road.label }}
											</view>
										</view>
									</view>
								</view>
							</view>
							<view class="form-group half">
								<label><text class="required">*</text>路 / 巷 / 弄 / 號 / Road / Lane / Number</label>
								<input type="text" v-model="formData.address" />
							</view>
						</view>
						<view class="form-group">
							<label><text class="required"
									style="font-weight: bolder;">*確認寄送地址/AddressConfirm</text></label>
							<input type="text" style="color: red;font-weight: bolder;" disabled
								:value="addressConfirm" />
							<label>
								<view style="color: #909399;margin: 12rpx 0;">煩請務必確認完整地址！</view>
								<text style="font-weight: bold;">※ 若非現場報到的跑者，則物資寄至活動現場時，仍需收取郵資費，活動當天在現場領取物資。(Postage
									fees will still apply forracepackets sent to the event venue. On the day of the
									event, packages can becollectedat the venue.)。</text>
							</label>
						</view>
						<view class="form-row">
							<view class="form-group half">
								<label><text class="required">*</text>聯絡電話(手機) / Mobile</label>
								<input type="tel" v-model="formData.phonenumber" />
							</view>
							<view class="form-group half">
								<label>聯絡電話(市話) / TEL</label>
								<input type="tel" v-model="formData.tel" />
							</view>
						</view>
						<view class="form-row">
							<view class="form-group half">
								<label>緊急連絡人 / Emergency Contact Person</label>
								<input type="text" v-model="formData.emergencyContact" />
							</view>
							<view class="form-group half">
								<label><text class="required">*</text>緊急連絡人電話 / Emergency Mobile</label>
								<input type="tel" v-model="formData.emergencyPhone" />
							</view>
						</view>
					</view>
					<view v-if="currentStep === 2">
						<h3>*報名項目/Registration items</h3>
						<view class="registration-options">
							<view v-for="item in pdList" :key="item.id" v-if="item.feeType==0"
								class="radio-item registration-option"
								:class="{ active: formData.registrationType === item.id }"
								@click="selectRegistrationType(item.id,item.feeValue)">
								<view class="radio-circle">
									<view class="radio-inner"></view>
								</view>
								<view class="option-details">
									<text class="option-name">{{item.name}}</text>
									<text class="option-price">${{item.feeValue}}</text>
								</view>
							</view>
						</view>

						<!-- 物資商品 -->
						<view v-if="filteredItems.length > 0" class="materials-section">
							<h3>物資商品</h3>
							<view class="materials-list">
								<view v-for="item in filteredItems" :key="item.id" v-if="item.feeValue === 'true'"
									class="material-item included">
									<view class="material-content">
										<view class="material-icon">
											<text class="icon-check">✓</text>
										</view>
										<view class="material-details">
											<text class="material-name">{{ item.groupName }}</text>
											<text class="material-status">已包含</text>
										</view>
									</view>
								</view>
							</view>
						</view>

						<!-- 加價購商品 -->
						<view v-if="selectedRegistrationType" class="additional-items-section">
							<h3>加價購商品</h3>
							<view class="additional-items-list">
								<view v-for="item in additionalItems" :key="item.id" class="additional-item">
									<view class="item-content">
										<img :src="item.image" alt="item.name" class="item-image" />
										<view class="item-details">
											<text class="item-name">{{ item.name }}</text>
											<text class="item-price">NT${{ getPrice(item) }}</text>
											<select v-if="item.specs && item.specs.length > 1"
												v-model="item.selectedSpec" class="item-spec"
												@change="updatePrice(item)">
												<option v-for="spec in item.specs" :key="spec.name" :value="spec.name">
													{{ spec.name }}
												</option>
											</select>
											<text v-else class="item-spec-text">通用尺寸</text>
											<button @click="addToCart(item)">加購</button>
										</view>
									</view>
								</view>
							</view>
						</view>

						<!-- 加價購商品明細 -->
						<view v-if="cartItems.length > 0" class="cart-details">
							<h3>加價購商品明細</h3>
							<view v-for="cartItem in cartItems" :key="cartItem.cartId" class="cart-item">
								<view class="cart-item-info">
									<text>{{ cartItem.name }} / {{ cartItem.selectedSpec || '通用尺寸' }}</text>
								</view>
								<view style="display: flex;align-items: center;width: 100%;justify-content: flex-end;">
									<text
										style="color: red;font-weight: bold;margin-right: 32rpx;">NT${{ cartItem.price * cartItem.quantity }}</text>
									<view class="quantity-controls">
										<button class="quantity-btn" @click="decreaseQuantity(cartItem)"
											:disabled="cartItem.quantity <= 1">－</button>
										<text class="quantity-display">{{ cartItem.quantity }}</text>
										<button class="quantity-btn" @click="increaseQuantity(cartItem)">＋</button>
										<button class="delete-btn" @click="removeFromCart(cartItem)">刪除</button>
									</view>
								</view>
							</view>
						</view>
						<!-- 添加小計區域 -->
						<view v-if="selectedRegistrationType" class="subtotal-section">
							<h3>小計/SUBTOTAL</h3>
							<view class="subtotal-item">
								<text>報名項目 - {{selectedRegistrationName}}</text>
								<text class="price">{{selectedRegistrationPrice}}</text>
							</view>
							<view class="subtotal-item">
								<text>物資商品</text>
								<text class="price">0</text>
							</view>
							<view class="subtotal-item">
								<text>加價購商品</text>
								<text class="price">{{cartTotalPrice}}</text>
							</view>
							<view class="subtotal-item total">
								<text>小計/SubTotal</text>
								<text class="price">{{totalPrice}}</text>
							</view>
						</view>
					</view>
					<view v-if="currentStep === 3">
						<view class="payment-section">
							<view class="payment-item">
								<view class="payment-header" @click="toggleRegistrationDetails">
									<text class="payment-title">報名明細/Registration Details</text>
									<!-- 添加一个箭头图标 -->
									<text class="toggle-arrow"
										:class="{ 'is-open': isRegistrationDetailsOpen }">▼</text>
								</view>
								<!-- 使用 v-show 控制内容的显示/隐藏 -->
								<view v-show="isRegistrationDetailsOpen">
									<view class="payment-header2">
										{{this.formData.nickName}}({{this.formData.sex == '1' ? '男' : '女'}})-{{this.formData.phonenumber}}
									</view>
									<view class="payment-main">
										<view class="payment-main-title">報名項目</view>
										<view class="payment-main-body">{{selectedRegistrationName}}</view>
										<view class="payment-main-title">物資商品</view>
										<view>
											<view class="payment-main-body" v-for="item in filteredItems" :key="item.id"
												v-if="item.feeValue === 'true'">
												<text>{{ item.groupName }}</text>
											</view>
										</view>
										<view class="payment-main-title">加價購商品</view>
										<view>
											<view v-for="cartItem in cartItems" :key="cartItem.cartId"
												class="payment-main-body">
												<text>{{cartItem.name}}/{{ cartItem.selectedSpec || '通用尺寸' }}*{{ cartItem.quantity }}</text>
											</view>
										</view>
									</view>
								</view>
							</view>
							<view class="payment-item">
								<view class="payment-header" @click="toggleDeliveryFee">
									<text class="payment-title">郵資費用/Delivery Fee</text>
									<text class="toggle-arrow" :class="{ 'is-open': isDeliveryFeeOpen }">▼</text>
								</view>
								<!-- 使用 v-show 控制内容的显示/隐藏 -->
								<view class="payment-content" v-show="isDeliveryFeeOpen">
									<view class="payment-header2"
										style="display: flex;justify-content: space-between;align-items: center;">
										<view>1 ~ 1 人</view>
										<view>$ 130</view>
									</view>
									<view style="color: red;font-weight: bold;">
										宅配方式：參賽物資將於活動前1-2週寄出，請務必填寫正確的平日(一~五)可收件之郵寄地址(請勿填郵政信箱)
									</view>
								</view>
							</view>
							<view class="payment-item">
								<view class="payment-header" @click="toggleCostDetails">
									<text class="payment-title">費用明細/Cost Details</text>
									<text class="toggle-arrow" :class="{ 'is-open': isCostDetailsOpen }">▼</text>
								</view>
								<!-- 使用 v-show 控制内容的显示/隐藏 -->
								<view class="payment-content" v-show="isCostDetailsOpen">
									<view>
										<view
											style="display: flex;justify-content: space-between;align-items: center;margin: 24rpx 0;">
											<view>報名費</view>
											<view>$ {{formData.racePrice}}</view>
										</view>
										<view
											style="display: flex;justify-content: space-between;align-items: center;margin: 24rpx 0;">
											<view>物資商品</view>
											<view>$ 0</view>
										</view>
										<view
											style="display: flex;justify-content: space-between;align-items: center;margin: 24rpx 0;">
											<view>加價購商品</view>
											<view>$ {{cartTotalPrice}}</view>
										</view>
										<view
											style="display: flex;justify-content: space-between;align-items: center;margin: 24rpx 0;">
											<view>郵資</view>
											<view>$ 130</view>
										</view>
										<view
											style="display: flex;justify-content: space-between;align-items: center;margin: 24rpx 0;">
											<view style="color: red;">折扣碼折抵</view>
											<view>$ {{formData.discount||0}}</view>
										</view>
									</view>
									<view class="payment-header2"
										style="display: flex;justify-content: space-between;align-items: center;">
										<view>總計</view>
										<view>$ {{calculateTotal()}}</view>
									</view>
								</view>
							</view>
							<view class="payment-item">
								<view class="payment-header" @click="togglePickupLocation">
									<text class="payment-title">取貨地點/Pickup Location</text>
									<text class="toggle-arrow" :class="{ 'is-open': isPickupLocationOpen }">▼</text>
								</view>
								<!-- 使用 v-show 控制内容的显示/隐藏 -->
								<view class="payment-content" v-show="isPickupLocationOpen">
									<view class="payment-header2">
										宅配寄送：{{addressConfirm}}
									</view>
								</view>
							</view>
							<view class="payment-item">
								<view class="payment-header" @click="togglePayTypeOpen">
									<text class="payment-title">繳費方式/Payment</text>
									<text class="toggle-arrow" :class="{ 'is-open': isPayType }">▼</text>
								</view>
								<view class="payment-content" v-show="isPayType">
									<view class="form-group">
										<view class="custom-select" :class="{ 'active': isPayTypeOpen }">
											<view class="select-trigger" @click="togglePayType()">
												{{ selectedPayTypeLabel || '請選擇繳費方式' }}
												<text class="select-arrow">▼</text>
											</view>
											<view class="select-dropdown" v-show="isPayTypeOpen">
												<view class="select-options">
													<view v-for="type in payTypes" :key="type.value"
														class="select-option"
														:class="{ 'selected': formData.payType === type.value }"
														@click="selectPayType(type)">
														{{ type.label }}
													</view>
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>


							<view class="payment-item">
								<view class="payment-header" @click="toggleCouponCode">
									<text class="payment-title">折扣碼/Coupon Code</text>
									<text class="toggle-arrow" :class="{ 'is-open': isCouponCodeOpen }">▼</text>
								</view>
								<!-- 使用 v-show 控制内容的显示/隐藏 -->
								<view class="payment-content" v-show="isCouponCodeOpen"
									style="display: flex; align-items: center; gap: 16rpx; margin-top: 24rpx;">
									<input type="text" v-model="formData.vipCode" placeholder="請輸入折扣碼" class="uni-input"
										style="flex: 1;" />
									<button @click="queryCoupon" class="query-btn"
										style="padding: 16rpx 32rpx; background: #c8102e; color: white; border: none; border-radius: 8rpx;">查詢</button>
								</view>
							</view>
							<view class="payment-item">
								<view class="payment-header" @click="toggleInvoice">
									<text class="payment-title">發票/電子發票/Invoice</text>
									<text class="toggle-arrow" :class="{ 'is-open': isInvoiceOpen }">▼</text>
								</view>
								<view class="payment-content" v-show="isInvoiceOpen">
									<!-- 發票類型選擇 -->
									<view class="form-group">
										<view class="custom-select" :class="{ 'active': isInvoiceTypeOpen }">
											<view class="select-trigger" @click="toggleInvoiceType">
												{{ selectedInvoiceTypeLabel || '請選擇發票類型' }}
												<text class="select-arrow">▼</text>
											</view>
											<view class="select-dropdown" v-show="isInvoiceTypeOpen">
												<view class="select-options">
													<view v-for="type in invoiceTypes" :key="type.value"
														class="select-option"
														:class="{ 'selected': formData.invoiceType === type.value }"
														@click="selectInvoiceType(type)">
														{{ type.label }}
													</view>
												</view>
											</view>
										</view>
									</view>
									<!-- 載具類型選擇 (個人) -->
									<view class="form-group" v-if="formData.invoiceType === 'personal'">
										<label>載具類型</label>
										<view class="custom-select" :class="{ 'active': isCarrierTypeOpen }">
											<view class="select-trigger" @click="toggleCarrierType">
												{{ selectedCarrierTypeLabel || '請選擇載具類型' }}
												<text class="select-arrow">▼</text>
											</view>
											<view class="select-dropdown" v-show="isCarrierTypeOpen">
												<view class="select-options">
													<view v-for="type in carrierTypes" :key="type.value"
														class="select-option"
														:class="{ 'selected': formData.carrierType === type.value }"
														@click="selectCarrierType(type)">
														{{ type.label }}
													</view>
												</view>
											</view>
										</view>
									</view>
									<!-- 公司資訊 (公司) -->
									<view v-if="formData.invoiceType === 'company'">
										<view class="form-group">
											<label>統一編號</label>
											<input type="text" v-model="formData.companyTaxId" maxlength="8"
												placeholder="請輸入統一編號" />
										</view>
										<view class="form-group">
											<label>公司抬頭</label>
											<input type="text" v-model="formData.companyTitle" placeholder="請輸入公司抬頭" />
										</view>
									</view>
								</view>
							</view>
						</view>
						<!-- 這裡添加付款相關內容 -->
					</view>
					<view v-if="currentStep === 4">
						<h2>報名完成</h2>
						<!-- 這裡添加完成狀態的內容 -->
					</view>

					<view class="next-button-container">
						<button v-if="currentStep > 1" class="prev-button" @click="handlePrev">
							上一步 / Previous
						</button>
						<button class="next-button" @click="handleNext">
							{{currentStep === 4 ? '完成 / Finish' : '下一步 / Next'}}
						</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import config from '@/config';
	import sunMenu from '../components/sun-menu/sun-menu.vue'
	import citiesData from '@/static/data/cities.json'
	import areasData from '@/static/data/areas.json'
	import roadsData from '@/static/data/roads.json'
	import {
		getProjectData,
		getCategoriesListAll,
		getProducts,
		getVipCode,
		addOrder
	} from '@/api/api.js'
	import {
		updateUser
	} from '@/api/login'
	import {
		createOpayOrder,
		createECPayOrder
	} from '@/api/payment.js'
	export default {
		components: {
			sunMenu
		},
		data() {
			// Initialize birthday values from store
			const birthday = this.$store.state.user.info.birthday;
			const nationality = this.$store.state.user.info.nationality;
			let birthYear = '';
			let birthMonth = '';
			let birthDay = '';
			let country = '';

			if (birthday) {
				const [year, month, day] = birthday.split('-');
				birthYear = parseInt(year);
				birthMonth = parseInt(month);
				birthDay = parseInt(day);
			}
			if (nationality) {
				if (nationality == "TAIWAN") {
					country = "TAIWAN"
				} else {
					country = "FOREIGN"
				}
			}

			return {
				isCouponCodeOpen: false,
				isPayTypeOpen: false,
				isPayType: false,
				isDiscountCodeOpen: false,
				isShippingMethodOpen: false,
				shippingMethods: [{
						value: 'conference',
						label: '物資寄至活動現場(package deliver to conference)'
					},
					{
						value: 'taiwan',
						label: '物資寄至臺灣指定地址(package deliver to Taiwan address)'
					}
				],
				info: {},
				formData: {
					discount: 0,
					nickName: this.$store.state.user.info.nickName,
					email: this.$store.state.user.info.email,
					nationality: this.$store.state.user.info.nationality,
					idNumber: this.$store.state.user.info.idNumber,
					sex: this.$store.state.user.info.sex,
					address: this.$store.state.user.info.address,
					emergencyContact: this.$store.state.user.info.emergencyContact,
					emergencyPhone: this.$store.state.user.info.emergencyPhone,
					phonenumber: this.$store.state.user.info.phonenumber,
					tel: this.$store.state.user.info.tel,
					birthYear: birthYear,
					birthMonth: birthMonth,
					birthDay: birthDay,
					cityLabel: this.$store.state.user.info.cityLabel,
					areaLabel: this.$store.state.user.info.areaLabel,
					roadLabel: this.$store.state.user.info.roadLabel,
					userId: this.$store.state.user.info.userId,
					country: country,
					shippingMethod: '',
					registrationType: '',
					invoiceType: '',
					carrierType: '',
					companyTaxId: '',
					companyTitle: '',
					payType: "",
				},
				countries: [{
						value: 'TAIWAN',
						label: '台灣'
					},
					{
						value: 'FOREIGN',
						label: '外國人'
					}
				],
				years: Array.from({
					length: 102
				}, (_, i) => 2024 - i),
				months: Array.from({
					length: 12
				}, (_, i) => i + 1),
				days: Array.from({
					length: 31
				}, (_, i) => i + 1),
				cities: citiesData.cities,
				cityAreas: areasData,
				cityRoads: roadsData,
				areas: [],
				roads: [],
				isNationalityOpen: false,
				isYearOpen: false,
				isMonthOpen: false,
				isDayOpen: false,
				isCityOpen: false,
				isAreaOpen: false,
				isRoadOpen: false,
				isMobile: false,
				currentTab: 'info',
				menuItems: [{
						id: 'info',
						name: '會員資訊'
					},
					{
						id: 'signup',
						name: '報名活動'
					},
					{
						id: 'history',
						name: '歷史成績'
					},
					{
						id: 'logout',
						name: '會員登出'
					}
				],
				nationalities: [{
						value: 'AFGHANISTAN',
						label: 'AFGHANISTAN'
					},
					{
						value: 'ALBANIA',
						label: 'ALBANIA'
					},
					{
						value: 'ALGERIA',
						label: 'ALGERIA'
					},
					{
						value: 'ARGENTINA',
						label: 'ARGENTINA'
					},
					{
						value: 'AUSTRALIA',
						label: 'AUSTRALIA'
					},
					{
						value: 'AUSTRIA',
						label: 'AUSTRIA'
					},
					{
						value: 'BANGLADESH',
						label: 'BANGLADESH'
					},
					{
						value: 'BELGIUM',
						label: 'BELGIUM'
					},
					{
						value: 'BRAZIL',
						label: 'BRAZIL'
					},
					{
						value: 'CAMBODIA',
						label: 'CAMBODIA'
					},
					{
						value: 'CANADA',
						label: 'CANADA'
					},
					{
						value: 'CHILE',
						label: 'CHILE'
					},
					{
						value: 'CHINA',
						label: 'CHINA'
					},
					{
						value: 'COLOMBIA',
						label: 'COLOMBIA'
					},
					{
						value: 'CZECH',
						label: 'CZECH REPUBLIC'
					},
					{
						value: 'DENMARK',
						label: 'DENMARK'
					},
					{
						value: 'EGYPT',
						label: 'EGYPT'
					},
					{
						value: 'FINLAND',
						label: 'FINLAND'
					},
					{
						value: 'FRANCE',
						label: 'FRANCE'
					},
					{
						value: 'GERMANY',
						label: 'GERMANY'
					},
					{
						value: 'GREECE',
						label: 'GREECE'
					},
					{
						value: 'HONG_KONG',
						label: 'HONG KONG'
					},
					{
						value: 'HUNGARY',
						label: 'HUNGARY'
					},
					{
						value: 'ICELAND',
						label: 'ICELAND'
					},
					{
						value: 'INDIA',
						label: 'INDIA'
					},
					{
						value: 'INDONESIA',
						label: 'INDONESIA'
					},
					{
						value: 'IRAN',
						label: 'IRAN'
					},
					{
						value: 'IRAQ',
						label: 'IRAQ'
					},
					{
						value: 'IRELAND',
						label: 'IRELAND'
					},
					{
						value: 'ISRAEL',
						label: 'ISRAEL'
					},
					{
						value: 'ITALY',
						label: 'ITALY'
					},
					{
						value: 'JAPAN',
						label: 'JAPAN'
					},
					{
						value: 'JORDAN',
						label: 'JORDAN'
					},
					{
						value: 'KAZAKHSTAN',
						label: 'KAZAKHSTAN'
					},
					{
						value: 'KENYA',
						label: 'KENYA'
					},
					{
						value: 'KOREA',
						label: 'KOREA'
					},
					{
						value: 'KUWAIT',
						label: 'KUWAIT'
					},
					{
						value: 'LAOS',
						label: 'LAOS'
					},
					{
						value: 'MALAYSIA',
						label: 'MALAYSIA'
					},
					{
						value: 'MALDIVES',
						label: 'MALDIVES'
					},
					{
						value: 'MEXICO',
						label: 'MEXICO'
					},
					{
						value: 'MONGOLIA',
						label: 'MONGOLIA'
					},
					{
						value: 'MOROCCO',
						label: 'MOROCCO'
					},
					{
						value: 'MYANMAR',
						label: 'MYANMAR'
					},
					{
						value: 'NEPAL',
						label: 'NEPAL'
					},
					{
						value: 'NETHERLANDS',
						label: 'NETHERLANDS'
					},
					{
						value: 'NEW_ZEALAND',
						label: 'NEW ZEALAND'
					},
					{
						value: 'NIGERIA',
						label: 'NIGERIA'
					},
					{
						value: 'NORWAY',
						label: 'NORWAY'
					},
					{
						value: 'PAKISTAN',
						label: 'PAKISTAN'
					},
					{
						value: 'PANAMA',
						label: 'PANAMA'
					},
					{
						value: 'PERU',
						label: 'PERU'
					},
					{
						value: 'PHILIPPINES',
						label: 'PHILIPPINES'
					},
					{
						value: 'POLAND',
						label: 'POLAND'
					},
					{
						value: 'PORTUGAL',
						label: 'PORTUGAL'
					},
					{
						value: 'QATAR',
						label: 'QATAR'
					},
					{
						value: 'ROMANIA',
						label: 'ROMANIA'
					},
					{
						value: 'RUSSIA',
						label: 'RUSSIA'
					},
					{
						value: 'SAUDI_ARABIA',
						label: 'SAUDI ARABIA'
					},
					{
						value: 'SINGAPORE',
						label: 'SINGAPORE'
					},
					{
						value: 'SOUTH_AFRICA',
						label: 'SOUTH AFRICA'
					},
					{
						value: 'SPAIN',
						label: 'SPAIN'
					},
					{
						value: 'SRI_LANKA',
						label: 'SRI LANKA'
					},
					{
						value: 'SWEDEN',
						label: 'SWEDEN'
					},
					{
						value: 'SWITZERLAND',
						label: 'SWITZERLAND'
					},
					{
						value: 'TAIWAN',
						label: 'TAIWAN'
					},
					{
						value: 'THAILAND',
						label: 'THAILAND'
					},
					{
						value: 'TURKEY',
						label: 'TURKEY'
					},
					{
						value: 'UKRAINE',
						label: 'UKRAINE'
					},
					{
						value: 'UAE',
						label: 'UNITED ARAB EMIRATES'
					},
					{
						value: 'UK',
						label: 'UNITED KINGDOM'
					},
					{
						value: 'USA',
						label: 'UNITED STATES'
					},
					{
						value: 'UZBEKISTAN',
						label: 'UZBEKISTAN'
					},
					{
						value: 'VENEZUELA',
						label: 'VENEZUELA'
					},
					{
						value: 'VIETNAM',
						label: 'VIETNAM'
					},
					{
						value: 'YEMEN',
						label: 'YEMEN'
					}
				],
				isCountryOpen: false,
				currentStep: 1,
				pdList: [],
				menuId:'',
				categoriesList: [],
				selectedRegistrationType: null,
				additionalItems: [], // 加购商品列表
				cartItems: [],
				isRegistrationDetailsOpen: false, // 控制報名明細的展开/收起
				isDeliveryFeeOpen: false, // 添加控制郵資費用展开/收起的变量
				isCostDetailsOpen: false, // 添加这一行
				isPickupLocationOpen: false, // 添加这一行
				isDiscountCodeOpen: false, // 添加这一行
				isInvoiceOpen: false, // 添加这一行
				isInvoiceTypeOpen: false, // 添加这一行
				isCarrierTypeOpen: false, // 添加这一行
				invoiceTypes: [{
						value: 'personal',
						label: '個人'
					},
					{
						value: 'company',
						label: '公司'
					}
				],
				payTypes: [{
						value: 'ecpay',
						label: '綠界支付'
					},
					{
						value: 'credit',
						label: '信用卡支付'
					}
				],
				carrierTypes: [{
						value: 'electronic',
						label: '電子發票載具'
					},
					{
						value: 'mobile',
						label: '手機條碼載具'
					},
					{
						value: 'citizen',
						label: '自然人憑證條碼'
					}
				],
			}
		},
		computed: {
			selectedNationalityLabel() {
				const selected = this.nationalities.find(n => n.value === this.formData.nationality)
				return selected ? selected.label : ''
			},
			selectedCityLabel() {
				return this.formData.cityLabel || '';
			},
			selectedAreaLabel() {
				return this.formData.areaLabel || '';
			},
			selectedRoadLabel() {
				return this.formData.roadLabel || '';
			},
			selectedCountryLabel() {
				const selected = this.countries.find(c => c.value === this.formData.country)
				return selected ? selected.label : ''
			},
			selectedShippingMethodLabel() {
				const selected = this.shippingMethods.find(m => m.value === this.formData.shippingMethod);
				return selected ? selected.label : '';
			},
			addressConfirm() {
				if (this.formData.shippingMethod === 'conference') {
					return this.info.address;
				}

				const parts = [
					this.formData.cityLabel,
					this.formData.areaLabel,
					this.formData.roadLabel,
					this.formData.address
				].filter(Boolean); // 過濾掉空值
				let pickupLocation = parts.join('') || '請填寫完整地址';
				this.formData.pickupLocation = pickupLocation
				return pickupLocation;
			},
			filteredItems() {
				if (!this.formData.registrationType) return [];
				// 先找到選中的報名��目
				const selectedRegistration = this.pdList.find(item => item.id === this.formData.registrationType);
				if (!selectedRegistration) return [];
				// 根據選中項目的名���和 feeType 過濾物資商品
				return this.pdList.filter(item =>
					item.name.includes(selectedRegistration.name) &&
					item.feeType == 2
				);
			},
			// 獲取選中報名項目的名稱
			selectedRegistrationName() {
				const selected = this.pdList.find(item => item.id === this.formData.registrationType);
				this.formData.raceCategoriesName = selected.name
				return selected ? selected.name : '';
			},

			// 獲取選中報名項目的價格
			selectedRegistrationPrice() {
				const selected = this.pdList.find(item => item.id === this.formData.registrationType);
				return selected ? selected.feeValue : 0;
			},

			// 計算購物車商品總價
			cartTotalPrice() {
				let addMoney = this.cartItems.reduce((total, item) => {
					return total + (item.price * item.quantity);
				}, 0);
				this.formData.addMoney = addMoney
				return addMoney;
			},

			// 計算總計金額
			totalPrice() {
				return Number(this.selectedRegistrationPrice) + Number(this.cartTotalPrice);
			},
			selectedInvoiceTypeLabel() {
				const type = this.invoiceTypes.find(t => t.value === this.formData.invoiceType)
				return type ? type.label : ''
			},
			selectedPayTypeLabel() {
				console.log(1111111)
				const type = this.payTypes.find(t => t.value === this.formData.payType)
				return type ? type.label : ''
			},
			selectedCarrierTypeLabel() {
				const type = this.carrierTypes.find(t => t.value === this.formData.carrierType)
				return type ? type.label : ''
			}
		},
		watch: {
			'formData.birthYear'() {
				this.adjustDays();
			},
			'formData.birthMonth'() {
				this.adjustDays();
			},
			'formData.city'(newCity) {
				if (newCity) {
					this.areas = this.cityAreas[newCity] || [];
				} else {
					this.areas = [];
				}
				this.formData.area = '';
				this.formData.road = '';
				this.roads = [];
			},
			'formData.area'(newArea) {
				if (newArea && this.formData.city) {
					this.roads = this.cityRoads[this.formData.city]?.[newArea] || [];
				} else {
					this.roads = [];
				}
				this.formData.road = '';
			},
			'info.id': {
				handler(newVal) {
					if (newVal) {
						this.getProducts();
					}
				},
				immediate: true
			}
		},
		onLoad(op) {
			this.menuId = op.id
			this.getProjectData(op.id)
			this.getCategoriesListAll(op.id)
			this.getProducts() //獲取加購商品
		},
		methods: {
			queryCoupon() {
				getVipCode({
					vipCode: this.formData.vipCode,
					userId: this.formData.userId
				}).then(res => {
					this.formData.discount = res.data
					uni.showModal({
						title: '提示',
						content: '查詢成功，已優惠$' + res.data
					})
				}).catch(res => {
					this.formData.discount = 0
				})
			},
			getProducts() {
				getProducts().then(res => {
					if (!res.data || !Array.isArray(res.data)) {
						console.warn('No products data or invalid format');
						return;
					}

					// 过滤并处理商品数据
					this.additionalItems = res.data
						.filter(product => {
							// 检查商品是否属于当前活动
							if (!product.activityId) return false;
							
							const activityIds = product.activityId.split(',')
								.map(id => parseInt(id.trim()));
							
							return activityIds.includes(parseInt(this.info.id));
						})
						.map(product => {
							// 处理规格数据
							try {
								return {
									...product,
									specs: typeof product.specs === 'string' ? 
										JSON.parse(product.specs) : product.specs
								};
							} catch (e) {
								console.error('Error parsing specs for product:', product.id, e);
								return product;
							}
						});
				}).catch(err => {
					console.error('Error fetching products:', err);
				});
			},
			getCategoriesListAll(id) {
				getCategoriesListAll({
					activityId: id
				}).then(res => {
					this.categoriesList = res.data
				})
			},
			getProjectData(id) {
				getProjectData(id).then(res => {
					this.pdList = res.data.pdList
					this.apList = res.data.apList
					this.info = res.data.info
				})
			},
			validateForm() {
				const requiredFields = {
					nickName: '姓名',
					nationality: '國家',
					country: '國籍',
					sex: '性別',
					birthYear: '出生年',
					birthMonth: '出生月',
					birthDay: '出生日',
					phonenumber: '手機號碼',
					email: 'Email',
					cityLabel: '縣市',
					areaLabel: '地區',
					roadLabel: '路名',
					address: '詳細地址',
				};
				let errors = [];

				// 檢查每個必填欄位
				for (const [field, label] of Object.entries(requiredFields)) {
					if (!this.formData[field]) {
						errors.push(`${label}不能為空`);
					}
				}
				// ��果是外國人，檢查物資寄送�����
				if (this.formData.nationality !== 'TAIWAN' && !this.formData.shippingMethod) {
					errors.push('請選擇物資寄送方式');
				}
				// 電子郵箱格式驗證
				const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
				if (this.formData.email && !emailRegex.test(this.formData.email)) {
					errors.push('輸入有效的電子郵箱地址');
				}
				// 只有當密碼欄位有輸入時才進行密碼相關驗證
				if (this.formData.password != "" && this.formData.password != undefined) {
					if (this.formData.confirmPassword == "" || this.formData.confirmPassword == undefined) {
						errors.push('確認密碼不能為空');
					}
					if (this.formData.password !== this.formData.confirmPassword) {
						errors.push('密碼與確認密碼不一致');
					}
				}
				if (this.formData.phonenumber == '' || this.formData.phonenumber == undefined) {
					errors.push('手機號不能為空');
				}
				return {
					isValid: errors.length === 0,
					errors
				};
			},
			onSubmit() {
				const validation = this.validateForm();
				if (!validation.isValid) {
					// 顯示錯誤信息
					console.log('表單驗證錯誤：', validation.errors);
					uni.showToast({
						title: validation.errors[0],
						icon: 'none',
						duration: 2000
					});
					return;
				}
				// 格式化生日和地址
				const birthday =
					`${this.formData.birthYear}-${String(this.formData.birthMonth).padStart(2, '0')}-${String(this.formData.birthDay).padStart(2, '0')}`;
				this.formData.birthday = birthday
				// 驗證通過的提示
				this.$modal.loading("更新中，请耐心等待...")
				this.updateUser()
			},
			toggleDiscountCode() {
				this.isDiscountCodeOpen = !this.isDiscountCodeOpen;
			},
			// 用户更新
			async updateUser() {
				this.formData.userId = this.$store.state.user.info.userId
				updateUser(this.formData).then(res => {
					this.$modal.closeLoading()
					this.loginSuccess()
				})
			},
			loginSuccess(result) {
				// 设置用户信息
				this.$store.dispatch('GetInfo').then(res => {
					this.$tab.reLaunch('/pages/myVip/myVip')
				})
			},
			selectSex(value) {
				this.formData.sex = value;
			},
			// 可選：添加搜索功能
			searchNationality(searchText) {
				return this.nationalities.filter(nation =>
					nation.label.toLowerCase().includes(searchText.toLowerCase())
				);
			},
			adjustDays() {
				const year = this.formData.birthYear;
				const month = this.formData.birthMonth;

				if (!year || !month) return;

				const daysInMonth = new Date(year, month, 0).getDate();
				this.days = Array.from({
					length: daysInMonth
				}, (_, i) => i + 1);

				// 如果選中的日期超過當月最大天數，重置日期
				if (this.formData.birthDay > daysInMonth) {
					this.formData.birthDay = '';
				}
			},
			onCityChange() {
				this.formData.area = '';
				this.areas = this.cityAreas[this.formData.city] || [];
			},
			toggleNationality() {
				this.isNationalityOpen = !this.isNationalityOpen
			},
			selectNationality(nation) {
				console.log(nation)
				if (nation.value == "TAIWAN") {
					this.formData.country = "TAIWAN"
					this.formData.shippingMethod = "taiwan"
				} else {
					this.formData.country = "FOREIGN"
				}
				this.formData.nationality = nation.value
				this.isNationalityOpen = false
			},
			// 點擊外部時關閉下拉框
			closeNationality(e) {
				if (!e.target.closest('.custom-select')) {
					this.isNationalityOpen = false
				}
			},
			toggleYear() {
				this.isYearOpen = !this.isYearOpen
			},
			selectYear(year) {
				this.formData.birthYear = year
				this.isYearOpen = false
			},
			toggleMonth() {
				this.isMonthOpen = !this.isMonthOpen
			},
			selectMonth(month) {
				this.formData.birthMonth = month
				this.isMonthOpen = false
			},
			toggleDay() {
				this.isDayOpen = !this.isDayOpen
			},
			selectDay(day) {
				this.formData.birthDay = day
				this.isDayOpen = false
			},
			toggleCity() {
				this.isCityOpen = !this.isCityOpen
			},
			selectCity(city) {
				this.formData.city = city.value;
				this.formData.cityLabel = city.label;
				this.isCityOpen = false;

				// Update areas based on selected city
				this.areas = this.cityAreas[city.value] || [];
				this.formData.area = ''; // Reset area selection
				this.formData.areaLabel = ''; // Reset area label

				// Reset roads when city changes
				this.roads = [];
				this.formData.road = ''; // Reset road selection
				this.formData.roadLabel = ''; // Reset road label
			},
			toggleArea() {
				this.isAreaOpen = !this.isAreaOpen
			},
			selectArea(area) {
				this.formData.area = area.value;
				this.formData.areaLabel = area.label;
				this.isAreaOpen = false;

				// Update roads based on selected area
				this.roads = this.cityRoads[this.formData.city]?.[area.value] || [];
				this.formData.road = ''; // Reset road selection
				this.formData.roadLabel = ''; // Reset road label
			},
			toggleRoad() {
				this.isRoadOpen = !this.isRoadOpen
			},
			selectRoad(road) {
				this.formData.road = road.value;
				this.formData.roadLabel = road.label;
				this.isRoadOpen = false;
			},
			switchTab(tabId) {
				if (tabId === 'logout') {
					// 处理登出逻辑
					this.handleLogout();
					return;
				}
				this.currentTab = tabId;

				// 处理不标签页的加载逻辑
				switch (tabId) {
					case 'signup':
						this.loadSignupActivities();
						break;
					case 'history':
						this.loadHistoryScores();
						break;
				}
			},
			checkDevice() {
				this.isMobile = window.innerWidth <= 768;
			},
			// Placeholder methods for loading data
			loadSignupActivities() {
				// 添加加载报名活动的逻辑
				console.log('Loading signup activities...');
			},
			loadHistoryScores() {
				// 添加加载历���成绩的逻辑
				console.log('Loading history scores...');
			},
			// 登出处理方法
			handleLogout() {
				uni.showModal({
					title: '提示',
					content: '確定要登出嗎？',
					success: (res) => {
						if (res.confirm) {
							// 执行登出操作
							this.$store.dispatch('LogOut').then(() => {
								uni.reLaunch({
									url: '/pages/myLogin/myLogin'
								});
							});
						}
					}
				});
			},
			toggleCountry() {
				this.isCountryOpen = !this.isCountryOpen
				// 關閉其他下拉框
				this.isNationalityOpen = false
			},
			selectCountry(country) {
				if (country.value == 'TAIWAN') {
					this.formData.nationality = "TAIWAN"
					this.formData.shippingMethod = "taiwan"
				} else {
					this.formData.nationality = ""
				}
				this.formData.country = country.value
				this.isCountryOpen = false
			},
			handleNext() {
				if (this.currentStep === 1) {
					// 驗證第一步的表單
					const validation = this.validateForm();
					if (!validation.isValid) {
						uni.showToast({
							title: validation.errors[0],
							icon: 'none',
							duration: 2000
						});
						return;
					}
				}
				// 第二步的報名項目驗證
				if (this.currentStep === 2) {
					if (!this.formData.registrationType) {
						uni.showToast({
							title: '請選擇報名項目',
							icon: 'none',
							duration: 2000
						});
						return;
					}
				}
				if (this.currentStep === 3) {
					if (!this.formData.payType) {
						uni.showToast({
							title: '請選擇繳費方式',
							icon: 'none',
							duration: 2000
						});
						return;
					}
					let productNames = this.filteredItems.filter(item => item.feeValue === "true").map(item => item
						.groupName).join(',');
					let productIds = this.filteredItems.filter(item => item.feeValue === "true").map(item => item.id).join(
						',');
					this.formData.productNames = productNames
					this.formData.productIds = productIds
					this.formData.addProducts = this.cartItems;
					const birthday =
						`${this.formData.birthYear}-${String(this.formData.birthMonth).padStart(2, '0')}-${String(this.formData.birthDay).padStart(2, '0')}`;
					this.formData.birthday = birthday
					this.formData.sendMoney = 130
					addOrder(this.formData).then(res => {
						let payRequest = {}
						payRequest.orderNo = res.msg
						payRequest.amount = 5
						payRequest.description = 'xx'
						payRequest.itemName = 'xx'
						payRequest.paymentMethod = this.formData.payType 
						if (this.formData.payType == 'credit') {
							createOpayOrder(payRequest).then(res => {
								// 创建临时表单
								const form = document.createElement('form');
								form.method = 'POST';
								form.action = res.data.opayApiUrl;
								form.target = '_blank'; 
								// 定义需要的字段数组
								const fields = [
									'MerchantID',
									'MerchantTradeNo',
									'MerchantTradeDate',
									'PaymentType',
									'TotalAmount',
									'TradeDesc',
									'ItemName',
									'ReturnURL', 
									'ChoosePayment',
									'EncryptType',
									'CheckMacValue',
									'CreditInstallment',
									'InstallmentAmount',
									'Redeem',
									'StoreID',
								]; 
								// 从res.data中获取数据并创建input
								fields.forEach(fieldName => {
									const input = document.createElement('input');
									input.type = 'hidden';
									input.name = fieldName;
									input.value = res.data[fieldName] || ''; // 如果没有值则设为空字符串
									form.appendChild(input);
								}); 
								// 添加到body并提交
								document.body.appendChild(form);
								form.submit();
								document.body.removeChild(form);
							})
						}
					})
				}
				// 根據當前步驟執行相的驗證處理
				switch (this.currentStep) {
					case 1:
						// 處理個人資料的保存
						break;
					case 2:
						// 處理物資選擇的保存
						break;
					case 3:
						// 處理付款信��的保存
						break;
					case 4:
						// 處理最終提交
						this.handleSubmit();
						return;
				}

				// 進入下一步
				if (this.currentStep < 4) {
					this.currentStep++;
				}

				// 滾動到���面頂部
				window.scrollTo({
					top: 0,
					behavior: 'smooth' // 平滑滾動
				});
			},
			handlePrev() {
				if (this.currentStep > 1) {
					this.currentStep--;
				}
			},
			handleSubmit() {
				// 處理最終的表單提交
				console.log('提交表單');
				// 這裡添加提交邏輯
			},
			toggleShippingMethod() {
				this.isShippingMethodOpen = !this.isShippingMethodOpen;
			},
			selectShippingMethod(method) {
				this.formData.shippingMethod = method.value;
				console.log(this.formData.shippingMethod)
				this.isShippingMethodOpen = false;
			},
			// 添加點擊外部關閉下拉框的處理
			closeAllDropdowns(e) {
				if (!e.target.closest('.custom-select')) {
					this.isShippingMethodOpen = false;
					// ... 關閉其他下拉框 ...
				}
			},
			selectRegistrationType(id, feeValue) {
				this.formData.raceCategoriesId = id;
				this.formData.registrationType = id;
				this.selectedRegistrationType = id;
				this.formData.racePrice = feeValue
				// 根據選擇的組別更新加價購商品
				this.updateAdditionalItems();
			},
			updateAdditionalItems() {
				// 根據選擇的組別更新加價購商品邏輯
				// 這裡可以根據選擇的組別過濾或更新 additionalItems
			},
			addToCart(item) {
				// 創建一個唯一的cartId，結合商品id和規格
				const cartId = `${item.id}-${item.selectedSpec || 'default'}`;

				// 檢查購物車中是否已存在相同商品和規格
				const existingItem = this.cartItems.find(cartItem => {
					return cartItem.cartId === cartId;
				});

				if (existingItem) {
					uni.showToast({
						title: '請勿重複加購相同尺寸商品',
						icon: 'none',
						duration: 2000
					});
					return;
				}

				// 添加到購物車時包含唯一的cartId
				this.cartItems.push({
					...item,
					cartId: cartId,
					price: this.getPrice(item),
					quantity: 1
				});

				uni.showToast({
					title: '加購成功',
					icon: 'success',
					duration: 2000
				});
			},
			removeFromCart(cartItem) {
				uni.showModal({
					title: '確認刪除',
					content: `確定要刪除 ${cartItem.name} ${cartItem.selectedSpec || '通用尺寸'} 嗎？`,
					confirmText: '確定',
					cancelText: '取消',
					success: (res) => {
						if (res.confirm) {
							// 用戶點擊確定，執行刪除操作
							this.cartItems = this.cartItems.filter(item => item.cartId !== cartItem.cartId);
							uni.showToast({
								title: '已刪除商品',
								icon: 'success',
								duration: 2000
							});
						}
						// 如果用戶點擊取消，不執行任何操作
					}
				});
			},
			increaseQuantity(item) {
				item.quantity++;
			},
			decreaseQuantity(item) {
				if (item.quantity > 1) {
					item.quantity--;
				}
			},
			getPrice(item) { 
				const spec = item.specs.find(s => s.name === item.selectedSpec);
				return spec ? spec.price : item.price;
			},
			updatePrice(item) {
				const spec = item.specs.find(s => s.name === item.selectedSpec);
				if (spec) {
					item.price = spec.price;
				}
			},
			toggleRegistrationDetails() {
				if (!this.isRegistrationDetailsOpen) {
					this.isDeliveryFeeOpen = false;
					this.isCostDetailsOpen = false;
					this.isPickupLocationOpen = false;
					this.isPayType = false;
					this.isCouponCodeOpen = false;
					this.isInvoiceOpen = false;
				}
				this.isRegistrationDetailsOpen = !this.isRegistrationDetailsOpen;
			},
			toggleDeliveryFee() {
				if (!this.isDeliveryFeeOpen) {
					this.isRegistrationDetailsOpen = false;
					this.isCostDetailsOpen = false;
					this.isPickupLocationOpen = false;
					this.isPayType = false;
					this.isCouponCodeOpen = false;
					this.isInvoiceOpen = false;
				}
				this.isDeliveryFeeOpen = !this.isDeliveryFeeOpen;
			},
			toggleCostDetails() {
				if (!this.isCostDetailsOpen) {
					this.isRegistrationDetailsOpen = false;
					this.isDeliveryFeeOpen = false;
					this.isPickupLocationOpen = false;
					this.isPayType = false;
					this.isCouponCodeOpen = false;
					this.isInvoiceOpen = false;
				}
				this.isCostDetailsOpen = !this.isCostDetailsOpen;
			},
			calculateTotal() {
				// 将字符串转换为数字进行计算
				const registrationFee = Number(this.formData.racePrice) || 0;
				const additionalItemsTotal = Number(this.cartTotalPrice) || 0;
				const shippingFee = 130;
				const discount = Number(this.formData.discount) || 0;
				// 计算总价
				const total = registrationFee + additionalItemsTotal + shippingFee - discount;
				return total;
			},
			togglePickupLocation() {
				if (!this.isPickupLocationOpen) {
					this.isRegistrationDetailsOpen = false;
					this.isDeliveryFeeOpen = false;
					this.isCostDetailsOpen = false;
					this.isPayType = false;
					this.isCouponCodeOpen = false;
					this.isInvoiceOpen = false;
				}
				this.isPickupLocationOpen = !this.isPickupLocationOpen;
			},
			togglePayTypeOpen() {
				if (!this.isPayType) {
					this.isRegistrationDetailsOpen = false;
					this.isDeliveryFeeOpen = false;
					this.isCostDetailsOpen = false;
					this.isPickupLocationOpen = false;
					this.isCouponCodeOpen = false;
					this.isInvoiceOpen = false;
				}
				this.isPayType = !this.isPayType;
				console.log(this.isPayType)
			},
			toggleCouponCode() {
				if (!this.isCouponCodeOpen) {
					this.isRegistrationDetailsOpen = false;
					this.isDeliveryFeeOpen = false;
					this.isCostDetailsOpen = false;
					this.isPickupLocationOpen = false;
					this.isPayType = false;
					this.isInvoiceOpen = false;
				}
				this.isCouponCodeOpen = !this.isCouponCodeOpen;
			},
			toggleInvoice() {
				if (!this.isInvoiceOpen) {
					this.isRegistrationDetailsOpen = false;
					this.isDeliveryFeeOpen = false;
					this.isCostDetailsOpen = false;
					this.isPickupLocationOpen = false;
					this.isPayType = false;
					this.isCouponCodeOpen = false;
				}
				this.isInvoiceOpen = !this.isInvoiceOpen;
			},
			toggleInvoiceType() {
				this.isInvoiceTypeOpen = !this.isInvoiceTypeOpen;
				this.isCarrierTypeOpen = false;
			},
			togglePayType() {
				this.isPayTypeOpen = !this.isPayTypeOpen;
			},
			toggleCarrierType() {
				this.isCarrierTypeOpen = !this.isCarrierTypeOpen;
				this.isInvoiceTypeOpen = false;
			},
			selectInvoiceType(type) {
				this.formData.invoiceType = type.value;
				this.formData.carrierType = ''; // 重置載具類型
				this.formData.companyTaxId = ''; // 重置公司資訊
				this.formData.companyTitle = '';
				this.isInvoiceTypeOpen = false;
			},
			selectPayType(type) {
				this.formData.payType = type.value;
				this.isPayTypeOpen = false;
			},
			selectCarrierType(type) {
				this.formData.carrierType = type.value;
				this.isCarrierTypeOpen = false;
			}
		},
		mounted() {
			// Initialize areas based on selected city
			if (this.formData.city) {
				this.areas = this.cityAreas[this.formData.city] || [];
			}

			// Initialize roads based on selected area
			if (this.formData.city && this.formData.area) {
				this.roads = this.cityRoads[this.formData.city]?.[this.formData.area] || [];
			}

			document.addEventListener('click', this.closeNationality);
			this.checkDevice();
			window.addEventListener('resize', this.checkDevice);
			// 添加點擊外部關閉下拉框的監聽
			document.addEventListener('click', this.closeAllDropdowns);
		},
		beforeDestroy() {
			document.removeEventListener('click', this.closeNationality)
			window.removeEventListener('resize', this.checkDevice);
			// 移除監聽器
			document.removeEventListener('click', this.closeAllDropdowns);
		}
	}
</script>

<style>
	/* Add this style to make all text selectable */
	* {
		user-select: text;
	}

	/* Ensure specific elements are not preventing text selection */
	label,
	input,
	select,
	.select-trigger,
	.radio-item,
	.option-details,
	.material-details,
	.item-details,
	.cart-item-info {
		user-select: text;
	}

	.register-container {
		max-width: 1100px;
		margin: 0px auto;
		padding: 40px;
		background: #ffffff;
		border-radius: 12px;
		box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
	}

	h1 {
		text-align: center;
		color: #333;
		margin-bottom: 40px;
		font-size: 28px;
		font-weight: 600;
	}

	.form-group {
		margin-bottom: 25px;
	}

	.form-row {
		display: flex;
		gap: 30px;
		margin-bottom: 10px;
	}

	.half {
		width: 50%;
	}

	label {
		display: block;
		margin-bottom: 8px;
		color: #555;
		font-size: 14px;
		font-weight: 500;
		cursor: text;
		user-select: text;
	}

	.required {
		color: #ff4d4f;
		margin-right: 4px;
	}

	/* 統一輸入框樣式 */
	.uni-input,
	input,
	select {
		width: 100%;
		height: 44px;
		line-height: 44px;
		padding: 0 12px;
		border: 1px solid #e2e8f0;
		border-radius: 6px;
		font-size: 14px;
		color: #333;
		background-color: #f8fafc;
		box-sizing: border-box;
	}

	/* 生日選擇器樣式 */
	.birthday-selects {
		display: flex;
		gap: 12px;
	}

	.birthday-selects select {
		flex: 1;
		text-align: center;
		padding-right: 24px;
		/* 為下拉箭頭留出空間 */
	}

	/* 拉框樣式 */
	.birthday-selects .uni-input {
		height: 44px;
		border: 1px solid #e2e8f0;
		border-radius: 6px;
		background-color: #f8fafc;
		font-size: 14px;
		color: #333;
		cursor: pointer;
		appearance: none;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
		background-repeat: no-repeat;
		background-position: right 8px center;
	}

	/* 下拉框懸停效�� */
	.birthday-selects .uni-input:hover {
		border-color: #4299e1;
	}

	/* 下拉框聚焦果 */
	.birthday-selects .uni-input:focus {
		border-color: #4299e1;
		outline: none;
		box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.15);
	}

	/* 選項樣式 */
	.birthday-selects .uni-input option {
		padding: 8px;
	}

	/* 響應式設計 */
	@media screen and (max-width: 768px) {
		.birthday-selects {
			gap: 8px;
		}

		.birthday-selects .uni-input {
			font-size: 16px;
			/* 防止 iOS 縮縮放 */
			padding-right: 20px;
		}
	}

	/* 性別選擇器樣式 */
	.radio-group {
		display: flex;
		gap: 20px;
		margin-top: 40rpx;
	}

	.radio-item {
		display: flex;
		align-items: center;
		cursor: pointer;
	}

	.radio-circle {
		width: 18px;
		height: 18px;
		border: 1px solid #dcdfe6;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: all 0.3s;
	}

	.radio-inner {
		width: 10px;
		height: 10px;
		border-radius: 50%;
		background-color: #81D8D0;
		opacity: 0;
		transition: all 0.3s;
	}

	.radio-item.active .radio-circle {
		border-color: #81D8D0;
	}

	.radio-item.active .radio-inner {
		opacity: 1;
	}

	/* 提交鈕樣式 */
	.submit-btn {
		width: 100%;
		height: 44px;
		line-height: 44px;
		background-color: red;
		color: white;
		border: none;
		border-radius: 6px;
		font-size: 16px;
		font-weight: 500;
		margin-top: 20px;
		text-align: center;
	}

	.submit-btn:active {
		background-color: #2c5282;
	}

	/* 響應式設計 */
	@media screen and (max-width: 768px) {
		.register-container {
			padding: 20px;
			margin: 15px;
		}

		.form-row {
			flex-direction: column;
			gap: 15px;
		}

		.half {
			width: 100%;
		}
	}

	/* 錯誤狀態 */
	.uni-input.error,
	input.error,
	select.error {
		border-color: #ff4d4f;
		background-color: #fff2f0;
	}

	/* 禁用狀態 */
	.uni-input[disabled],
	input[disabled],
	select[disabled] {
		background-color: #f5f5f5;
		color: #999;
	}

	/* ��輸入框 */
	input[type="password"] {
		letter-spacing: 4px;
	}

	/* 下拉選擇框樣式 */
	select {
		width: 100%;
		height: 44px;
		padding: 0 12px;
		border: 1px solid #e2e8f0;
		border-radius: 6px;
		background-color: #f8fafc;
		font-size: 14px;
		color: #333;
		cursor: pointer;
		appearance: none;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
		background-repeat: no-repeat;
		background-position: right 12px center;
		padding-right: 30px;
	}

	select:disabled {
		background-color: #f5f5f5;
		cursor: not-allowed;
		opacity: 0.7;
	}

	select:hover:not(:disabled) {
		border-color: #4299e1;
	}

	select:focus {
		border-color: #4299e1;
		outline: none;
		box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.15);
	}

	/* 響應式設計 */
	@media screen and (max-width: 768px) {
		select {
			font-size: 16px;
		}
	}

	.custom-select {
		position: relative;
		width: 100%;
	}

	.select-trigger {
		height: 44px;
		line-height: 40px;
		padding: 0 30px 0 12px;
		/* 右側留出箭���空��� */
		border: 1px solid #dcdfe6;
		border-radius: 4px;
		background-color: #fff;
		cursor: pointer;
		display: flex;
		align-items: center;
		font-size: 14px;
		color: #606266;
		transition: all 0.2s;
		position: relative;
	}

	/* 位符文字顏色 */
	.select-trigger.placeholder {
		color: #c0c4cc;
	}

	/* 箭頭樣 */
	.select-arrow {
		position: absolute;
		right: 12px;
		top: 50%;
		transform: translateY(-50%);
		font-size: 12px;
		color: #c0c4cc;
		transition: transform 0.2s;
	}

	/* 激活狀態的箭頭 */
	.custom-select.active .select-arrow {
		transform: translateY(-50%) rotate(180deg);
		color: #409eff;
	}

	/* 下拉框激活狀態 */
	.custom-select.active .select-trigger {
		border-color: #409eff;
	}

	/* 禁用狀態 */
	.select-trigger.disabled {
		background-color: #f5f7fa;
		border-color: #e4e7ed;
		color: #c0c4cc;
		cursor: not-allowed;
	}

	/* 下拉面板 */
	.select-dropdown {
		position: absolute;
		width: 100%;
		background: white;
		border: 1px solid #e2e8f0;
		border-radius: 6px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
		z-index: 1000;
	}

	/* 向下展開的樣式 */
	.select-dropdown.dropdown-bottom {
		top: 100%;
		margin-top: 4px;
	}

	/* 向上展開的樣式 */
	.select-dropdown.dropdown-top {
		bottom: 100%;
		margin-bottom: 4px;
	}

	/* 下拉選項容器 */
	.select-options {
		max-height: 274px;
		overflow-y: auto;
		padding: 6px 0;
	}

	/* 下拉選項 */
	.select-option {
		height: 34px;
		line-height: 34px;
		padding: 0 20px;
		font-size: 14px;
		color: #606266;
		cursor: pointer;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* 選項懸停狀態 */
	.select-option:hover {
		background-color: #f5f7fa;
	}

	/* 選中狀態 */
	.select-option.selected {
		color: #409eff;
		font-weight: 700;
		background-color: #f5f7fa;
	}

	/* 自定義滾動 */
	.select-options::-webkit-scrollbar {
		width: 6px;
	}

	.select-options::-webkit-scrollbar-track {
		background: #fff;
	}

	.select-options::-webkit-scrollbar-thumb {
		background: #e4e7ed;
		border-radius: 3px;
	}

	.select-options::-webkit-scrollbar-thumb:hover {
		background: #c0c4cc;
	}

	/* 生日選擇器特殊樣式 */
	.birthday-selects {
		display: flex;
		gap: 12px;
	}

	.birthday-selects .custom-select {
		flex: 1;
	}

	/* 懸停效果 */
	.select-trigger:hover:not(.disabled) {
		border-color: #c0c4cc;
	}

	/* 聚焦效果 */
	.custom-select.active .select-trigger:not(.disabled) {
		border-color: #409eff;
	}

	/* ���誤狀態 */
	.custom-select.error .select-trigger {
		border-color: #f56c6c;
	}

	/* 下拉框動畫 */
	.select-dropdown {
		transform-origin: center top;
		animation: dropDown 0.2s ease-in-out;
	}

	@keyframes dropDown {
		0% {
			transform: scaleY(0);
			opacity: 0;
		}

		100% {
			transform: scaleY(1);
			opacity: 1;
		}
	}

	/* 響應式調整 */
	@media screen and (max-width: 768px) {
		.select-trigger {
			height: 88rpx;
			line-height: 36px;
		}

		.select-option {
			height: 30px;
			line-height: 30px;
		}

		.birthday-selects {
			gap: 8px;
		}
	}

	/* Add new styles */
	.page-container {
		display: flex;
		width: 100%;
		max-width: 1200px;
		margin: 0 auto;
		gap: 20px;
		padding: 88rpx 15px 0;
	}

	.side-menu {
		width: 200px;
		background-color: #ffffff;
		padding: 0;
		height: fit-content;
		border-radius: 12px;
		box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
		margin-top: 90px;
		margin-left: 130px;
	}

	.menu-item {
		padding: 15px 20px;
		cursor: pointer;
		transition: all 0.3s;
		border-left: 4px solid transparent;
	}

	.menu-item:hover {
		background-color: #f5f5f5;
	}

	.menu-item.active {
		background-color: #f0f0f0;
		border-left-color: #81D8D0;
		font-weight: bold;
	}

	.main-content {
		flex: 1;
		min-width: 0;
	}

	.main-content.with-menu {
		margin-left: 0;
	}

	/* 整響應式佈局 */
	@media screen and (max-width: 768px) {
		.side-menu {
			display: none;
		}

		.page-container {
			padding: 88rpx 10px 0;
		}
	}

	/* Add new styles for tab content */
	.content-container {
		max-width: 800px;
		margin: 30px auto;
		padding: 40px;
		background: #ffffff;
		border-radius: 12px;
		box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
	}

	.empty-state {
		text-align: center;
		padding: 40px;
		color: #999;
		font-size: 14px;
	}

	.signup-list,
	.history-list {
		min-height: 200px;
	}

	/* Responsive adjustments */
	@media screen and (max-width: 768px) {
		.content-container {
			margin: 15px;
			padding: 20px;
		}
	}

	/* Add style for logout menu item */
	.menu-item:last-child {
		margin-top: auto;
		border-top: 1px solid #e0e0e0;
	}

	/* Add styles for sunMenu container */
	.sun-menu-container {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 1000;
		background-color: #fff;
	}

	/* 更新移動端菜單樣式 */
	.mobile-menu {
		width: 100%;
		background-color: #ffffff;
		padding: 15px 24rpx;
		border-radius: 12px;
		box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
		margin: 0 0 15px;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 10px;
	}

	.mobile-menu .menu-item {
		flex: 0 0 calc(50% - 5px);
		text-align: center;
		padding: 12px 15px;
		background-color: #f8f9fa;
		border-radius: 6px;
		cursor: pointer;
		transition: all 0.3s;
		font-size: 14px;
	}

	.mobile-menu .menu-item.active {
		background-color: #81D8D0;
		color: white;
	}

	.mobile-menu .menu-item:hover {
		opacity: 0.9;
	}

	/* 更新響應式樣式 */
	@media screen and (max-width: 768px) {
		.page-container {
			padding: 88rpx 24rpx 0;
		}

		.register-container,
		.content-container {
			padding: 40rpx 24rpx;
			margin: 15px 0;
		}

		.mobile-menu {
			margin-top: -60rpx;
		}
	}

	/* 更新登出按鈕樣式 */
	.mobile-menu .menu-item:last-child {
		background-color: #FFB6C1;
		/* 使用稍深一點的粉紅色，以提供更好的對比度 */
		color: white;
		/* 文字改為白色 */
	}

	.mobile-menu .menu-item:last-child:hover {
		background-color: #FF9AA2;
		/* hover時顏色稍深 */
		color: white;
	}

	.mobile-menu .menu-item:last-child.active {
		background-color: #FF8396;
		/* 選中狀態的顏色 */
		color: white;
	}

	/* 步驟條樣式 */
	.steps-container {
		display: flex;
		justify-content: space-between;
		padding: 20px 0;
		margin-bottom: 30px;
	}

	.step-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
		flex: 1;
	}

	.step-item:not(:last-child)::after {
		content: '';
		position: absolute;
		top: 20px;
		left: 50%;
		width: 100%;
		height: 2px;
		background: #e0e0e0;
		z-index: 1;
	}

	.step-number {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		background: #f5f5f5;
		border: 2px solid #e0e0e0;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: bold;
		position: relative;
		z-index: 2;
		transition: all 0.3s;
	}

	.step-label {
		margin-top: 8px;
		font-size: 14px;
		color: #666;
		transition: all 0.3s;
	}

	/* 活動步驟樣式 */
	.step-item.active .step-number {
		background: #81D8D0;
		border-color: #81D8D0;
		color: white;
	}

	.step-item.active .step-label {
		color: #81D8D0;
	}

	/* 已完成步驟樣式 */
	.step-item.completed .step-number {
		background: #81D8D0;
		border-color: #81D8D0;
		color: white;
	}

	.step-item.completed:not(:last-child)::after {
		background: #81D8D0;
	}

	/* 下一步按鈕樣式 */
	.next-button-container {
		display: flex;
		justify-content: center;
		gap: 24px;
		margin-top: 40px;
		padding: 0 20px;
	}

	/* 共用按鈕基礎樣式 */
	.next-button,
	.prev-button {
		min-width: 180px;
		padding: 14px 32px;
		border-radius: 50px;
		font-size: 16px;
		font-weight: 500;
		cursor: pointer;
		transition: all 0.3s ease;
		border: none;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
	}

	/* 下一步按鈕特定樣式 */
	.next-button {
		background: linear-gradient(135deg, #81D8D0, #65C1B9);
		color: white;
	}

	.next-button:hover {
		background: linear-gradient(135deg, #65C1B9, #4AAEA6);
		transform: translateY(-2px);
		box-shadow: 0 4px 12px rgba(129, 216, 208, 0.3);
	}

	.next-button:active {
		transform: translateY(0);
		box-shadow: 0 2px 6px rgba(129, 216, 208, 0.2);
	}

	/* 上一步按鈕特定樣式 */
	.prev-button {
		background: white;
		color: #666;
		border: 1px solid #e0e0e0;
	}

	.prev-button:hover {
		background: #f8f8f8;
		transform: translateY(-2px);
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	}

	.prev-button:active {
		transform: translateY(0);
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
	}

	/* 響���式調整 */
	@media screen and (max-width: 768px) {
		.next-button-container {
			flex-direction: column-reverse;
			/* 在手機版將下一步按鈕置於上方 */
			gap: 16px;
			margin-top: 32px;
		}

		.next-button,
		.prev-button {
			width: 100%;
			min-width: unset;
			padding: 12px 24px;
			font-size: 15px;
		}
	}

	/* 報名選項相關樣式 */
	.registration-options {
		display: flex;
		flex-direction: column;
		gap: 16px;
		margin: 20px 0;
	}

	.registration-option {
		display: flex;
		align-items: center;
		padding: 20px;
		background: #f8f9fa;
		border: 2px solid transparent;
		border-radius: 12px;
		transition: all 0.3s ease;
		cursor: pointer;
	}

	.registration-option:hover {
		background: #f0f1f2;
		transform: translateY(-2px);
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
	}

	.registration-option.active {
		background: #fff;
		border-color: #81D8D0;
		box-shadow: 0 4px 12px rgba(129, 216, 208, 0.2);
	}

	.registration-option .radio-circle {
		min-width: 24px;
		height: 24px;
	}

	.option-details {
		margin-left: 16px;
	}

	.option-name {
		font-weight: 600;
		color: #333;
		font-size: 16px;
	}

	.option-group {
		color: #666;
		font-size: 14px;
		background: #e9ecef;
		padding: 4px 12px;
		border-radius: 16px;
	}

	.option-price {
		margin-left: 12px;
		font-weight: 600;
		color: #81D8D0;
		font-size: 18px;
	}

	/* 報名選項響應式設計 */
	@media screen and (max-width: 768px) {
		.registration-option {
			padding: 16px;
		}

		.option-details {
			flex-wrap: wrap;

		}

		.option-name {
			width: 100%;
			font-size: 15px;
		}

		.option-group {
			font-size: 13px;
		}

		.option-price {
			font-size: 16px;
			margin-left: 24rpx;
		}
	}

	/* 物資商品區塊樣式 */
	.materials-section {
		margin-top: 32px;
		padding: 24px;
		background: #f8f9fa;
		border-radius: 12px;
	}

	.materials-section h3 {
		margin-bottom: 16px;
		color: #333;
		font-size: 18px;
	}

	.materials-list {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
		gap: 16px;
	}

	.material-item {
		background: white;
		border-radius: 8px;
		padding: 16px;
		transition: all 0.3s ease;
		border: 1px solid #e0e0e0;
	}

	.material-item.included {
		border-color: #81D8D0;
		background: rgba(129, 216, 208, 0.05);
	}

	.material-content {
		display: flex;
		align-items: center;
		gap: 12px;
	}

	.material-icon {
		width: 32px;
		height: 32px;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 16px;
		flex-shrink: 0;
	}

	.material-item.included .material-icon {
		background: #81D8D0;
		color: white;
	}

	.material-item:not(.included) .material-icon {
		background: #f0f0f0;
		color: #666;
	}

	.material-details {
		flex: 1;
	}

	.material-name {
		display: block;
		font-weight: 500;
		color: #333;
		margin-bottom: 4px;
	}

	.material-status {
		font-size: 13px;
		color: #666;
	}

	.material-item.included .material-status {
		color: #81D8D0;
	}

	/* 響應式調整 */
	@media screen and (max-width: 768px) {
		.materials-section {
			padding: 16px;
			margin-top: 24px;
		}

		.materials-list {
			grid-template-columns: 1fr;
		}

		.material-item {
			padding: 12px;
		}
	}

	/* 添加樣式 */
	.additional-items-section {
		margin-top: 32px;
		padding: 24px;
		background: #ffffff;
		border-radius: 12px;
	}

	.additional-items-list {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 20px;
		margin-top: 20px;
	}

	.additional-item {
		background: white;
		padding: 16px;
		border-radius: 8px;
		border: 1px solid #e0e0e0;
	}

	.item-content {
		display: flex;
		flex-direction: column;
		gap: 12px;
	}

	.item-image {
		width: 100%;
		height: 140px;
		object-fit: cover;
		border-radius: 8px;
	}

	.item-details {
		display: flex;
		flex-direction: column;
		gap: 8px;
	}

	.item-name {
		font-size: 16px;
		font-weight: 600;
		color: #333;
	}

	.item-price {
		font-size: 18px;
		font-weight: bold;
		color: #81D8D0;
	}

	.item-spec {
		width: 100%;
		border: 1px solid #e0e0e0;
		border-radius: 6px;
		font-size: 14px;
		color: #666;
		background: #f8f9fa;
		appearance: none;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
		background-repeat: no-repeat;
		background-position: right 10px center;
		background-size: 12px;
	}

	/* 添加禁用狀態樣式 */
	.item-spec.disabled {
		background-color: #f5f5f5;
		color: #999;
		cursor: not-allowed;
		border-color: #e0e0e0;
		background-image: none;
		/* 移除下拉箭頭 */
	}

	/* 確保禁用狀態下無法點擊 */
	.item-spec.disabled select {
		pointer-events: none;
	}

	.additional-item button {
		width: 100%;
		padding: 10px;
		background: #81D8D0;
		color: white;
		border: none;
		border-radius: 6px;
		font-size: 14px;
		font-weight: 500;
		cursor: pointer;
	}

	.additional-item button:hover {
		background: #65C1B9;
	}

	/* 響應式設計 */
	@media screen and (min-width: 769px) and (max-width: 1200px) {
		.additional-items-list {
			grid-template-columns: repeat(2, 1fr);
		}
	}

	@media screen and (max-width: 768px) {
		.additional-items-section {
			padding: 16px;
			margin-top: 20px;
		}

		.additional-items-list {
			grid-template-columns: repeat(2, 1fr);
			gap: 12px;
		}

		.additional-item {
			padding: 12px;
		}

		.item-image {
			height: 120px;
		}

		.item-name {
			font-size: 14px;
		}

		.item-price {
			font-size: 16px;
		}

		.item-spec {
			font-size: 12px;
		}

		.additional-item button {
			padding: 8px;
			font-size: 12px;
		}
	}

	/* 小屏手機端 */
	@media screen and (max-width: 480px) {
		.additional-items-list {
			grid-template-columns: 1fr;
		}

		.item-image {
			height: 160px;
			object-fit: cover;
		}
	}

	.item-spec-text {
		font-size: 14px;
		color: #666;
		padding: 12.5px 0;
	}

	@media screen and (max-width: 768px) {
		.item-spec-text {
			font-size: 12px;
			padding: 6px 0;
		}
	}

	.cart-details {
		margin-top: 20px;
		padding: 16px;
		background: #f8f9fa;
		border-radius: 8px;
	}

	.cart-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 12px 0;
		border-bottom: 1px solid #e0e0e0;
	}

	.cart-item-info {
		display: flex;
		flex-direction: column;
		gap: 4px;
		width: 50%;
	}

	.quantity-controls {
		display: flex;
		align-items: center;
	}

	.quantity-btn {
		width: 28px;
		height: 28px;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 1px solid #e0e0e0;
		background: #fff;
		border-radius: 4px;
		font-size: 16px;
		cursor: pointer;
		padding: 0;
	}

	.quantity-btn:disabled {
		background: #f5f5f5;
		cursor: not-allowed;
		color: #999;
	}

	.quantity-btn:hover:not(:disabled) {
		background: #f5f5f5;
	}

	.quantity-display {
		min-width: 32px;
		text-align: center;
		font-size: 14px;
		margin: 0 12rpx;
	}

	.delete-btn {
		padding: 6px 12px;
		background: #ff4d4f;
		color: white;
		border: none;
		border-radius: 4px;
		font-size: 14px;
		cursor: pointer;
		margin-left: 32rpx;
	}

	.delete-btn:hover {
		background: #ff7875;
	}

	/* 響應式設計 */
	@media screen and (max-width: 768px) {
		.cart-item {
			flex-direction: column;
			align-items: flex-start;
			gap: 12px;
		}

		.quantity-controls {
			display: flex;
			align-items: center;
		}

		.quantity-btn {
			width: 24px;
			height: 24px;
			font-size: 14px;
		}

		.delete-btn {
			padding: 4px 8px;
			font-size: 12px;
		}
	}

	/* 添加相關樣式 */
	.subtotal-section {
		margin-top: 32px;
		padding: 24px;
		background: #f8f9fa;
		border-radius: 12px;
		box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
	}

	.subtotal-section h3 {
		margin-bottom: 16px;
		color: #333;
		font-size: 18px;
		font-weight: bold;
		text-align: center;
	}

	.subtotal-item {
		display: flex;
		justify-content: space-between;
		padding: 12px 0;
		border-bottom: 1px solid #e0e0e0;
	}

	.subtotal-item:last-child {
		border-bottom: none;
	}

	.subtotal-item.total {
		font-weight: bold;
		color: #81D8D0;
		font-size: 16px;
	}

	.price {
		color: red;
		/* Changed to red */
		font-weight: 600;
	}

	.payment-title {
		font-weight: bold;
	}

	.payment-header2 {
		font-weight: bold;
		background-color: yellow;
		padding: 24rpx;
		border-radius: 48rpx;
		margin: 24rpx 0;
	}

	.payment-main {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}

	.payment-main-title {
		background-color: gainsboro;
		padding: 12rpx 24rpx;
		border-radius: 48rpx;
		font-weight: bold;
	}

	.payment-main-body {
		margin: 16rpx 0;
	}

	.toggle-arrow {
		font-size: 12px;
		margin-left: 8px;
		transition: transform 0.3s;
	}

	.toggle-arrow.is-open {
		transform: rotate(180deg);
	}

	.payment-content {}

	/* 添加展开/收起的动画效果 */
	.payment-content {
		transition: all 0.3s ease-in-out;
		overflow: hidden;
	}

	.payment-item {
		margin: 48rpx 0;
	}

	.payment-header {
		cursor: pointer;
		/* 添加这一行，使鼠标变为手掌样式 */
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 12px 0;
	}

	/* 可选：添加hover效果以增强交互提示 */
	.payment-header:hover {
		opacity: 0.8;
	}

	/* 修改或添加以下 CSS */

	/* 支付部分容器 */
	.payment-section {
		position: relative;
		/* 添加相對定位 */
		z-index: 1;
		/* 設置基礎層級 */
	}

	/* 支付項目容器 */
	.payment-item {
		position: relative;
		/* z-index: 2; */
		/* 確保高於其他普通元素 */
	}

	/* 下拉框觸發器 */
	.select-trigger {
		position: relative;
		z-index: 3;
		/* 確保在下拉框收起時可見 */
	}

	/* 下拉框容器 */
	.select-dropdown {
		position: absolute;
		width: 100%;
		background: white;
		border: 1px solid #e2e8f0;
		border-radius: 6px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
		z-index: 1000;
		/* 設置很高的層級確保顯示在最上層 */
	}

	/* 確保父容器不會截斷溢出內容 */
	.payment-content {
		position: relative;
		overflow: visible;
		/* 允許內容溢出 */
	}

	/* 向上展開的下拉框 */
	.dropdown-up {
		bottom: 100%;
		top: auto;
		margin-bottom: 4px;
	}

	/* 如果有其他可能遮擋的元素，確保它們的 z-index 較低 */
	.other-elements {
		z-index: 1;
	}
</style>